<template>
  <div>
    <van-sticky :offset-top="0">
      <div class="header">
        <van-icon
          name="arrow-left"
          size="18"
          class="icon-one"
          @click="router"
        />
        <span class="span">{{ this.file }}</span>
      </div>
    </van-sticky>

    <!-- 下拉刷新 -->
    <van-pull-refresh
      style="min-height: 80vh"
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <van-sticky :offset-top="45">
        <div style="background-color: #fff">
          <!-- tab栏切换 -->
          <ul class="ul">
            <!-- <li v-for="(item,index) in lis" @click="lisBtn(index)" :class="classBtn()" :key="index" class="lif">{{item.name}}</li> -->
            <li
              v-for="(item, index) in screen.lis"
              @click="lisBtn(index)"
              :class="{ active: screen.currentindex === index }"
              :key="index"
              class="lif"
            >
              <!-- 箭头样式 -->
              <span class="span-top-down"
                >{{ item.name }}
                <van-icon
                  name="arrow-up"
                  class="top"
                  :class="{ black: item.status === 1 ? 'black' : '' }"
                />
                <van-icon
                  name="arrow-down"
                  :class="item.status === 2 ? 'black' : ''"
                  class="down"
                />
              </span>
            </li>
            <!-- 筛选弹窗 -->
            <li class="lif font" @click="showPopup">筛选</li>
            <van-popup
              v-model="show"
              position="right"
              :style="{ height: '100%', width: '50%' }"
            >
              <!-- 筛选按钮 -->
              <van-button
                v-for="(i, inde) in label.list"
                :key="inde"
                type="default"
                :class="{ button_color: label.selected === inde }"
                @click="vanBtn(inde)"
                >{{ label.list[inde].name }}</van-button
              >
            </van-popup>
          </ul>
        </div>
      </van-sticky>
      <!-- list列表 -->
      <!--本地图片:img="require('../images/demo/demo6.jpg')" -->
      <xiaomi :list="list" :file="file"></xiaomi>
    </van-pull-refresh>
  </div>
</template>

<script>
import xiaomi from "../components/xiaomi.vue";
import { Toast } from "vant";
export default {
  name: "VantChoose",
  data() {
    return {
      name: "",
      title: "",
      page: 1,
      show: false,
      count: 0,
      isLoading: false,
      screen: {
        currentindex: 0,
        lis: [
          {
            name: "综合",
            status: 1,
            // key用来传升序以及降序数据
            key: "all",
          },
          {
            name: "销量",
            status: 0,
            key: "sale_count",
          },
          {
            name: "价格",
            status: 0,
            key: "min_price",
          },
        ],
      },
      list: [
        /* {
          title: "真无限蓝牙耳机",
          titlepic: "../images/demo/demo6.jpg",
          desc: "雅致简约 / 分体式入耳 / 收纳盒充电 / 蓝牙5.0 / 触控操作",
          pprice: 100,
          comment_num: 1300,
          good_num: "98%",
        },
        {
          title: "真无限蓝牙耳机",
          titlepic: "../images/demo/demo6.jpg",
          desc: "雅致简约 / 分体式入耳 / 收纳盒充电 / 蓝牙5.0 / 触控操作",
          pprice: 100,
          comment_num: 1300,
          good_num: "98%",
        },
        {
          title: "真无限蓝牙耳机",
          titlepic: "../images/demo/demo6.jpg",
          desc: "雅致简约 / 分体式入耳 / 收纳盒充电 / 蓝牙5.0 / 触控操作",
          pprice: 100,
          comment_num: 1300,
          good_num: "98%",
        },
        {
          title: "真无限蓝牙耳机",
          titlepic: "../images/demo/demo6.jpg",
          desc: "雅致简约 / 分体式入耳 / 收纳盒充电 / 蓝牙5.0 / 触控操作",
          pprice: 100,
          comment_num: 1300,
          good_num: "98%",
        },
        {
          title: "真无限蓝牙耳机",
          titlepic: "../images/demo/demo6.jpg",
          desc: "雅致简约 / 分体式入耳 / 收纳盒充电 / 蓝牙5.0 / 触控操作",
          pprice: 100,
          comment_num: 1300,
          good_num: "98%",
        },
        {
          title: "真无限蓝牙耳机",
          titlepic: "../images/demo/demo6.jpg",
          desc: "雅致简约 / 分体式入耳 / 收纳盒充电 / 蓝牙5.0 / 触控操作",
          pprice: 100,
          comment_num: 1300,
          good_num: "98%",
        },
        {
          title: "真无限蓝牙耳机",
          titlepic: "../images/demo/demo6.jpg",
          desc: "雅致简约 / 分体式入耳 / 收纳盒充电 / 蓝牙5.0 / 触控操作",
          pprice: 100,
          comment_num: 1300,
          good_num: "98%",
        },
        {
          title: "真无限蓝牙耳机",
          titlepic: "../images/demo/demo6.jpg",
          desc: "雅致简约 / 分体式入耳 / 收纳盒充电 / 蓝牙5.0 / 触控操作",
          pprice: 100,
          comment_num: 1300,
          good_num: "98%",
        },
        {
          title: "真无限蓝牙耳机",
          titlepic: "../images/demo/demo6.jpg",
          desc: "雅致简约 / 分体式入耳 / 收纳盒充电 / 蓝牙5.0 / 触控操作",
          pprice: 100,
          comment_num: 1300,
          good_num: "98%",
        }, */
      ],
      label: {
        selected: 0,
        list: [
          {
            name: "不限",
            // rule规则
            rule: false,
            value: false,
          },
          {
            name: "100-200",
            rule: "between",
            value: "100,200",
          },
          {
            name: "200-300",
            rule: "between",
            value: "200,300",
          },
          {
            name: "300-400",
            rule: "between",
            value: "300,400",
          },
          {
            name: "400以上",
            rule: ">",
            value: "400",
          },
        ],
      },
    };
  },
  methods: {
    onRefresh() {
      this.isLoading = true;

      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
      }, 1000);
    },
    vanBtn(inde) {
      this.label.selected = inde;
      // 筛选时再次请求数据
      this.getData();
    },
    showPopup() {
      this.show = true;
    },
    router() {
      this.$router.push("/search");
      //   window.sessionStorage.clear();
      window.sessionStorage.removeItem("shuju");
      this.name = "";
      this.list = "";
    },
    // tab栏标签
    lisBtn(index) {
      var oldIndex = this.screen.currentindex;
      var oldItem = this.screen.lis[oldIndex];
      if (index == oldIndex) {
        oldItem.status = oldItem.status === 1 ? 2 : 1;
        // 在这里要重新请求一下数据
        this.getData();
        // 请求结束必须加return
        return;
      } else {
        var newItem = this.screen.lis[index];
        oldItem.status = 0;
        newItem.status = 1;
        this.screen.currentindex = index;
        //  console.log(newItem);
        // 这里再次请求一次
        this.getData();
      }
    },
    formata(req) {
      return req.map((v) => {
        let good_num =
          v.comments_good_count === 0
            ? 0
            : (v.comments_good_count / v.comments_count) * 100;
        return {
          id: v.id,
          title: v.title,
          titlepic: v.cover,
          desc: v.desc,
          pprice: v.min_price,
          comment_num: v.comments_count,
          good_num: good_num.toFixed(2) + "%",
        };
      });
    },
    // refresh下拉刷新
    getData(refresh = false) {
      this.name = window.sessionStorage.getItem("shuju");
      /*       this.name = JSON.parse(this.name);
      console.log(this.name);
      this.title = this.name.keyword; */
      console.log(typeof this.title);
      this.$axios
        .post("/goods/search", null, {
          params: {
            title: this.file,
            page: this.page,
            ...this.options,
            ...this.condition,
          },
        })
        .then((v) => {
          console.log(v);
          // 这里要以对象的形式进行传参
          console.log({ ...this.options });
          console.log(this.title);
          let con = this.formata(v.data.data);
          this.list = refresh ? [...con, ...this.list] : [...con];
        });
      if (typeof refresh == "function") {
        refresh();
      }
    },
  },
  components: {
    xiaomi,
  },
  mounted() {
    this.getData();
  },

  computed: {
    file() {
      return this.$route.query.keyword;
    },
    options() {
      // 通过状态来获取
      let obj = this.screen.lis[this.screen.currentindex];
      // 一为升序，二为降序
      let value = obj.status === 1 ? "asc" : "desc";
      console.log(value);
      return {
        // 这里是一个数组
        [obj.key]: value,
      };
    },
    // 筛选部分
    condition() {
      let item = this.label.list[this.label.selected];
      if (item.rule && item.value) {
        return {
          price: `${item.rule},${item.value}`,
        };
      }
    },
  },
};
</script>

<style  scoped>
.header {
  background-color: #fff;
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.font {
  font-size: 17px !important;
}
.icon-one {
  margin-left: 0.133333rem;
  width: 10%;
}
.span {
  text-align: center;
  font-size: 18px;
  margin-right: 10%;
  width: 90%;
}
.ul {
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-items: center;
  justify-content: space-between;
}
.lif {
  flex: 1;
  text-align: center;
  font-size: 20px;
  height: 25px;
}
.active {
  color: red;
}
.black {
  color: black;
}
.van-icon {
  display: inline-block;
  font-size: 12px;
}
.span-top-down {
  position: relative;
  font-size: 16px;
}
.top {
  position: absolute;
  top: -3px;
  right: -20px;
}
.down {
  position: absolute;
  top: 8px;
  right: -20px;
}
.van-button {
  border-radius: 5px;
  margin: 5px;
}
.button_color {
  background-color: coral;
  color: #fff;
}
</style>